<template>
  <div style="width: 100%;margin-top: 0px;">
    <div class="mt-4" style="margin-top: 20px;margin-bottom: 20px;">
      <el-button style="margin-left: 1px" type="danger" @click="deletesGoodId">批量删除</el-button>
      <el-button type="primary" plain style="margin-left: 20px" @click="showDialog">添加商品</el-button>
      <el-button type="warning" plain style="margin-left: 50%" @click="">
        采购
        <el-icon class="el-icon--right">
          <Upload/>
        </el-icon>
      </el-button>
      <el-input
          v-model="goodName"
          placeholder="请输入商品名称"
          class="input-with-select"
          style="width: 10%;margin-left: 3%"
      >
      </el-input>
      <el-button type="primary" id="sele" style="margin-left: 10px;" @click="selectPurchasePlans">
        搜索
      </el-button>
    </div>


    <!--    表格-->
    <el-table :data="SelectPurchasePlan" @selection-change="handleSelectionChange2" border
              style="width: 100%;text-align: center;font-weight: bold;margin-top: 40px;border-left: none">
      <el-table-column type="selection" width="55"  />
      <!--      <el-table-column label="商品ID" prop="goodId" />-->
      <el-table-column label="商品图片" prop="goodUrl">
      </el-table-column>
      <el-table-column label="商品名称" prop="goodName"/>
      <el-table-column label="单价" prop="price"/>
      <el-table-column label="数量" prop="quantity"/>
      <el-table-column label="总价" prop="TotalPrice">
        <template #default="scope">
          <span>{{scope.row.price*scope.row.quantity}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small"  @click="userEdit(scope.row)"
          >修改</el-button
          >
          <el-button
              size="small"
              type="danger"
              @click="deletes(scope.row.goodId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="limit.page"
          :page-sizes="[5, 10,15, 20]"
          :page-size="limit.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="limit.totalCount">
      </el-pagination>
    </div>

    <el-dialog title="新增采购商品" :visible.sync="dialogVisible" width="50%" center>
      <div class="dialogDiv">
        <el-input
            v-model="goodNames"
            placeholder="请输入商品名称"
            class="input-with-select"
            clearable
            style="width: 20%;margin-left: 45%"
        >
        </el-input>
        <el-button type="primary" style="margin-left: 10px;" @click="showDialog">
          搜索
        </el-button>
        <el-button type="primary" plain style="margin-left: 20px" @click="addGoods">增加商品</el-button>
          <el-table :data="SelectGoogs" @selection-change="handleSelectionChange" border
                  style="width: 100%;text-align: center;font-weight: bold;margin-top: 40px;border-left: none">
          <el-table-column type="selection" width="55"/>
          <el-table-column label="商品图片" prop="goodUrl">
          </el-table-column>
          <el-table-column label="商品名称" prop="goodName"/>
          <el-table-column label="单价" prop="price"/>
          <el-table-column label="数量">
            <template #default="scope">
              <el-input-number v-model="scope.row.quantity" :min="1" placeholder="1000" :max="9999" style="width: 92%"/>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
            @size-change="handleSizeChanges"
            @current-change="handleCurrentChanges"
            :current-page="limits.page"
            :page-sizes="[5, 10,15, 20]"
            :page-size="limits.limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="limits.totalCount">
        </el-pagination>
      </div>
    </el-dialog>

  </div>


</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false, // 控制弹窗的显示和隐藏
      SelectGoogs: null,
      SelectPurchasePlan: null,
      list: null,
      goodId:null,
      goodName: null,
      goodNames: null,
      limit: {
        page: 1,      // 当前页
        limit: 5,    // 显示数
        totalCount: 0
      }, limits: {
        page: 1,      // 当前页
        limit: 5,    // 显示数
        totalCount: 0
      }
    };
  },
  methods: {
    selectPurchasePlans() {
      const data = this.$qs.stringify({
        strWhere: this.goodName,
        page: this.limit.page,
        limit: this.limit.limit
      });
      this.$http.post("http://localhost:8200/selectPurchasePlan", data
      ).then(res => {
        this.SelectPurchasePlan = res.data.t
        this.limit.totalCount = res.data.count
      })
    },
    showDialog() {
      this.dialogVisible = true; // 设置弹窗的显示状态为 true
      this.goodName = null;
      const data = this.$qs.stringify({
        strWhere: this.goodNames,
        page: this.limits.page,
        limit: this.limits.limit
      });
      this.$http.post("http://localhost:8200/selectGoogs", data
      ).then(res => {
        this.SelectGoogs = res.data.t
        this.limits.totalCount = res.data.count
      })
    }, handleSelectionChange(row) {
      console.log(row)
      this.list = row
    }, addGoods() {
      this.$http.post("http://localhost:8200/insertPurchasePlan", this.list
      ).then(res => {
        if (res.data >= 1) {
          this.dialogVisible=false
          this.selectPurchasePlans()
          this.$message({
            message: "新增成功",
            type: "success"
          });
        }
      })
    }, handleSelectionChange2(row) {
      console.log(row)
      this.list = row
    }, deletesGoodId() {
      this.$http.post("http://localhost:8200/deletePurchasePlan", this.list
      ).then(res => {
          this.selectPurchasePlans()
          this.$message({
            message: "删除成功",
            type: "success"
          });
      })
    },
    //根据主键ID进行删除
    deletes(goodId){
      this.$http.post("http://localhost:8200/deletePurchasePlan2?goodId="+goodId, this.goodId
      ).then(res => {
        if (res.data >= 1) {
          this.dialogVisible=false
          this.selectPurchasePlans()
          this.$message({
            message: "删除成功",
            type: "success"
          });
        }
      })
    },

    handleSizeChange(val) {
      this.limit.limit = val;  // 修改显示数
      this.selectPurchasePlans()
    }
    ,
    handleCurrentChange(val) {
      this.limit.page = val;  // 更新当前的页
      this.selectPurchasePlans()
    },

    handleSizeChanges(val) {
      this.limits.limit = val;  // 修改显示数
      this.showDialog()
    }
    ,
    handleCurrentChanges(val) {
      this.limits.page = val;  // 更新当前的页
      this.showDialog()
    }

  }, created() {
    this.selectPurchasePlans()
  }
}
</script>

<style scoped>
.dialogDiv {
  height: 500px;
  overflow: auto;
}

th {
  width: 20%;
  border: 1px;
}

td {
  width: 20%;
  border: 1px;
}

::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent !important;
  border: 1px;

}

/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent !important;
  text-align: center;
}
</style>